<template>
  <div>
    <el-dialog
      title="找回密码"
      :visible="dialogPwdVisible"
      @close="dialogCloseFn()"
      center
      width=400px
      :show-close='false'
    >
      <el-form
        :model="pwdFrom"
        ref="pwdFrom"
        :rules='pwdRules'
      >
        <el-form-item label="验证码">
          <el-input
            v-model.trim="pwdFrom.code"
            clearable
            minlength="4"
            maxlength="4"
            @keyup.enter.native="confirmFn()"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model.trim="pwdFrom.password"
            show-password
            clearable
            minlength="6"
            maxlength="12"
            @keyup.enter.native="confirmFn()"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model.trim="pwdFrom.checkPwd"
            show-password
            clearable
            minlength="6"
            maxlength="12"
            @keyup.enter.native="confirmFn()"
          ></el-input>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancelFn()">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmFn()"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updatePwdAPI } from '@/api'
export default {
  name: 'myBack',
  props: {
    dialogPwdVisible: Boolean,
    backFrom: Object
  },
  data () {
    return {
      pwdFrom: {
        password: '',
        code: '',
        checkPwd: ''
      },
      pwdRules: {
        password: [
          { required: true, message: '密码不能为空', trigger: 'change' },
          {
            min: 6,
            max: 12,
            type: 'string',
            message: '密码要求6-12个字符',
            trigger: 'change'
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          {
            len: 4,
            type: 'number',
            message: '验证码要求4个字符',
            trigger: 'change'
          }
        ],
        checkPwd: [
          {
            validator: (rule, value, callback) => {
              if (value !== this.pwdFrom.password) {
                callback(new Error('两次密码输入不一致!'))
              } else callback()
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 点击取消按钮 -> 点击事件
    cancelFn () {
      this.$emit('update:dialogPwdVisible', false)
    },
    // 点击确定按钮 -> 点击事件
    confirmFn () {
      this.$refs.pwdFrom.validate(async (valid) => {
        if (valid) {
          try {
            const { success, code } = await updatePwdAPI({
              ...this.backFrom,
              password: this.pwdFrom.password,
              code: this.pwdFrom.code
            })
            if (success && code === 10000) {
              success && this.$emit('update:dialogPwdVisible', false)
            }
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    },
    // 弹窗关闭 -> 回调函数
    dialogCloseFn () {
      // 清空表单
      this.pwdFrom = this.$options.data().pwdFrom
      this.$refs.pwdFrom?.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
